<template>
  <slot v-if="showSlot" :permissions="permissions"></slot>
</template>
<script>
export default {
  data() {
    return {
      permissions: null,
    }
  },
  props: {
    permission: [String, Array]
  },
  mounted() {
    // 从vuex中取权限
    // this.permissions = getAuth()
  },
  computed: {
    showSlot() {
      if (!this.permission) {
        // 没有传入权限，直接显示
        return true
      }
      return this.permission.includes(this.permissions)
    },
  },
}
</script>

<!--
方式一：统一控制显隐
<Authority permission="edit">
  <button>修改</button>
</Authority>

方式二：可以控制显隐、禁用可用等
<Authority>
  <template #default="{permissions}">
    <button :disabled="permissions.includes('edit')">修改</button>
  </template>
</Authority>
-->